<script>
import { reactive, toRefs } from '@vue/reactivity'
import { getserch } from "../assets/api/home"
import { Toast } from 'vant'
import 'vant/es/toast/style';
import router from '@/router';
import { useRouter } from 'vue-router';

export default {
    setup() {
        //实现响应式数据
        let obj = reactive({
            serachData: [],
            value: ""
        })
        let routers = useRouter()

        // 搜索框的数据绑定
        let getValue = () => {
            //如果输入框内容为空
            if (obj.value == "") {
               Toast("请输入内容")
            } else {
                //否则请求数据
                getserch(obj.value).then(data => {
                    obj.serachData = data.data.results.list
                    // console.log(obj.serachData);
                })
            }
        }

        //清空输入框的内容
        let clearText = ()=>{
            obj.value=""
        }

        // 取消
        let cancel = ()=>{
            router.go(-1)
        }

        // 进入购买页面
        let goShop = (id)=>{
            // console.log(id);
            routers.push({
                path:"/shopping",
                query:{
                    key:id
                }
                
            })
        }

        return {
            ...toRefs(obj),
            getValue,
            clearText,
            cancel,
            goShop
        }
    },
}
</script>


<template>
    <div class="container">
        <header>
            <!-- 搜索框 -->
            <div class="left">
                <i></i>
                <input type="text" placeholder="请输入图书名称" @keydown.enter="getValue" v-model="value" />
                <span @click="clearText"></span>
            </div>

            <!-- 点击取消返回书城页面 -->
            <div class="right">
                <h6 @click="cancel">取消</h6>
            </div>
        </header>

        <!-- 书本介绍卡 -->
        <div class="mains">
            <!-- 有书的话就遍历 -->
            <div class="box" v-for="item in serachData" :key="item" @click="goShop(item.key)">
                <div class="left">
                    <img :src="item.img" alt="" />
                </div>

                <div class="right">
                    <h5>{{ item.title }}</h5>

                    <div class="bottom">
                        <h5>{{ item.saleNum }}人购买</h5>
                        <h6>
                            <span class="oldprice">{{ item.price }}</span>
                            <span>¥{{ item.disprice }}</span>
                        </h6>
                    </div>
                </div>
            </div>

            <!-- 没搜到的话就提示搜索不到 -->
            <div class="empty" v-if="serachData.length ==0">
                <img src="../assets/img/ic_empty_search.e2946ec.png" alt="" />
                <h5>暂无搜索内容哦~</h5>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
@import "../assets/css/base.css";

header {
    padding: 0px 15px;
    margin-top: 9px;
    display: flex;
}

header .left {
    display: flex;
    background-color: #f2f2f2;
    flex: 1;
    height: 28px;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
}

header input {
    flex: 1;
    background-color: #f2f2f2;
    padding-left: 9px;
}

header .left i {
    display: block;
    width: 17px;
    height: 17px;
    background-image: url(../assets/img/search1.png);
    background-repeat: no-repeat;
    background-size: 17px 17px;
    margin-left: 9px;
}

header .left span {
    display: block;
    width: 17px;
    height: 17px;
    background-image: url(../assets/img/clear.png);
    background-size: 17px 17px;
    margin-right: 9px;
}

header .right h6 {
    height: 28px;
    line-height: 28px;
    color: #4375e4;
    font-size: 14px;
    font-weight: bold;
    margin-left: 18px;
}

/* 项目 */
.mains {
    padding-bottom: 50px;
}

.mains .box {
    display: flex;
    margin-top: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #efefef;
    margin-left: 15px;
}

.mains .box .left {
    width: 24%;
    padding: 13px 0;

    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px #c4c4c4;
}

.mains .box .left img {
    width: 100%;
}

.mains .box .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin: 13px 0px 13px 10px;
    padding-right: 15px;
}

.mains .box .right>h5 {
    font-weight: bolder;
}

.mains .box .right .bottom {
    display: flex;
    justify-content: space-between;
}

.mains .box .right .bottom h5 {
    font-size: 12px;
    color: #212121;
}

.mains .box .right .bottom h6 {
    font-size: 16px;
    font-weight: bold;
}

.mains .box .right .bottom h6 .oldprice {
    text-decoration: line-through;
    font-size: 12px;
    color: #d5d4d9;
    margin-right: 7px;
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}

.empty img {
    width: 150px;
    height: 150px;
}
</style>